<template>
	<view class="sidebar_content">
        <view class="sidebar" :style="{ transform: 'translateX(' + sidebarTransform + ')' , width: !sidebarBool ? '0px' : '496rpx' }">
                <view></view>
            <view class="bao_scroll_y">
                <view v-for="(item, index) in sideList"  >
                    <NavMenu 
                        :menuItem="item" 
                        :menuIndex="index"
                        :menuPath="[index]"
                        @menu-clicked="handleMenuClicked"
                        :key="item.id"></NavMenu>
                </view>
            </view>

        </view>

        <view v-if="sideList.length > 0" class="icon" :style="{ left: !sidebarBool ? '0px' : '480rpx', display: 'flex', }">
            <u-icon  @tap="handleSidebar" v-if="sidebarBool" class="icon_1" name="play-left-fill"></u-icon>
            <u-icon  @tap="handleSidebar" v-else class="icon_1" name="play-right-fill"></u-icon>
        </view>
	</view>
</template>

<script>
import NavMenu from "../my-NavMenu/NavMenu.vue";
import { mapMutations, mapState, mapActions } from 'vuex';
	export default {
        components: {
            NavMenu: NavMenu
        },
		data() {
			return {
                sidebarTransform: '0px',
                activeIndex: '-1',
			}
		},
        computed: {
			...mapState(['sidebarBool', 'sideList'])
		},
		methods: {
            handleMenuClicked(menuItem) {
                this.$emit('changeData', menuItem)
            },
           
            handleMenuSelect(index) {
                console.log("=== 当前选中的菜单项索引是：" + index);
            },
			handleActive1(index) {
                this.handleActive(index)
                this.getTableDataAct(1)
            },
            handleSidebar() {
                this.sidebarTransform = !this.sidebarBool ? '0px' : '-100%';
                this.handleHideSidebar(this.sidebarBool)
            },
            ...mapMutations([
                'handleActive', 
                'handleHideSidebar'
            ]),
            ...mapActions([
                'getTableDataAct', 
            ]),
		}
	}
</script>

<style lang="less" scoped>


.sidebar_content {
    position: relative;
    display: flex;
    font-size: 40rpx;

    .bao_scroll_y {
        height: calc(100vh - 420rpx);
        height: calc(100vh - 304rpx);
        overflow: auto;
    }

    .sidebar {
        transition: all 0.3s;
    }
    .item {
        width: 220rpx;
        padding: 10rpx 15rpx;
        color: #f59a23;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .item1 {
        padding: 10rpx 15rpx;
        color: #f59a23;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        display: inline;
        width: 80rpx;
        height: calc(100vh - 312rpx);
       
        transition: left 0.3s;
        background: #fff;

        .icon_1{
            z-index: 9;
            padding: 40rpx 10rpx;
            // background: #ddd;
            background: linear-gradient(to right, white 0%, #ddd    80%);
            box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.5);
        }
    }
    
}

</style>
